 /* 包含汉字的正方形 */
 .hanzi-square {
     position: relative;
     width: 200px;
     /* 设置正方形大小 */
     height: 200px;
     margin: 0 auto;
     /* 居中 */
     border: 2px solid #333;
     /* 外边框 */
     box-sizing: border-box;
 }

 @font-face {
     font-family: 'huawen';
     /* 自定义字体名称 */
     src: url('/static/fonts/aa.ttf') format('truetype');
     /* 字体路径和格式 */
 }

 .hanzi-char {
     font-family: 'huawen';
     /* 使用自定义字体，后备字体为 sans-serif */
     font-size: 10rem;
     /* 字体大小 */
     font-weight: bold;
     color: #333;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }


 /* 对角线和分割线 */
 .hanzi-square::before,
 .hanzi-square::after,
 .hanzi-square>.line-horizontal,
 .hanzi-square>.line-vertical {
     content: '';
     position: absolute;
     border-style: dotted;
     border-color: #999;
 }

 /* 对角线 */
 .hanzi-square::before {
     width: 2px;
     height: 283px;
     /* 对角线的长度 (√(200² + 200²)) */
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
     /* 左上到右下 */
     border-width: 0 0 2px 2px;
 }

 .hanzi-square::after {
     width: 2px;
     height: 283px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(-45deg);
     /* 右上到左下 */
     border-width: 0 2px 2px 0;
 }

 /* 水平分割线 */
 .hanzi-square>.line-horizontal {
     width: 100%;
     height: 2px;
     top: 50%;
     left: 0;
     border-width: 0 0 2px 0;
 }

 /* 垂直分割线 */
 .hanzi-square>.line-vertical {
     width: 2px;
     height: 100%;
     top: 0;
     left: 50%;
     border-width: 0 0 0 2px;
 }